<template>
  <div>
    <!-- 头 Myheader -->
    <div>
      <div class="Myheader">
        <div class="title"><img src="/img/logo.png" alt="" /></div>
        <div class="search">
          <input type="text" name="" id="" />
          <i class="el-icon-search"></i>
        </div>
        <div class="lr">
          <i class="el-icon-mobile-phone">移动端</i>
          <span>登录</span><span>注册</span>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div class="nav-left">
        <el-menu :default-active="activeIndex" mode="horizontal">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">书库</el-menu-item>
          <el-menu-item index="3">排行</el-menu-item>
          <el-menu-item index="4">完本</el-menu-item>
          <el-menu-item index="5">免费</el-menu-item>
          <el-menu-item index="6">漫画</el-menu-item>
        </el-menu>
      </div>
      <div class="nav-right">
        <el-menu :default-active="activeIndex" mode="horizontal">
          <el-menu-item index="7"><i class="el-icon-edit"></i>作者专区</el-menu-item>
          <el-menu-item index="8">游戏中心</el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    }
  },
}
</script>

<style lang="scss" scoped>
.Myheader {
  // background-color: #fff;
  margin: 20px auto;
  width: 1200px;
  height: 36px;
  color: #e9e7ef;
  display: flex;
  justify-content: space-between;
  line-height: 36px;
  .title {
    width: 167px;
    img {
      width: 100%;
    }
  }
  .search {
    width: 338px;
    border: 1px solid #e0e0e0;
    display: flex;
    overflow: hidden;
    input {
      height: 36px;
      width: 298px;
      padding: 0;
      outline: none;
      border: 0;
    }
    i {
      width: 40px;
      // height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: #9d2933;
    }
  }
  .lr {
    background-color: skyblue;
    padding: 0 10px;
    span {
      margin: 0 10px;
    }
  }
}
.nav {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  background-color: #fff;

  .nav-left {
    width: 742px;
  }
  .nav-right {
    width: 458px;
    // padding: 0 30px;

    .el-menu--horizontal > .el-menu-item {
      float: right;
    }
  }
  .el-menu--horizontal > .el-menu-item {
    height: 48px;
    line-height: 40px;
    margin: 0 24px;
    font-size: 16px;
    font-weight: 600;
    color: #24384d;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    color: #9d2933;
    border-bottom: 3px solid #9d2933;
  }
  .el-menu--horizontal > .el-menu-item:hover {
    color: #9d2933;
  }
}
</style>
